import { mapGetters } from 'vuex'
import { debounce } from 'lodash'
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: {
    TreeSelect
  },
  data () {
    return {
      dialog: {
        status: 'create',
        visible: false, // 是否显示
        title: '添加'
      },
      formParams: { // 编辑需要的参数
      },
      editInfo: { // 编辑表单
        id: undefined,
        data: {
          ...this.formParams
        },
        rules: {},
        disabled: false // 处理编辑，某些项禁止编辑
      },
      treeSelectProps (node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      departmentAllListData: [],
      detailInfo: null
    }
  },
  props: {
    visible: {
      type: [Boolean],
      required: true,
      default: false
    },
    detailData: {
      type: Object,
      default () {
        return null
      }
    }
  },
  computed: {
    ...mapGetters('department', [
      'departmentList'
    ])
  },
  methods: {
    handleEditSubmit: debounce(function () { // 编辑，提交，防抖
      this.$refs['editInfo'].validate((valid) => {
        if (valid) {
          if (this.editInfo.id) {
            this.updateData()
          } else {
            this.createData()
          }
        }
      })
    }, 300),
    async createData () { // 添加－请求数据
    },
    async updateData () { // 修改－请求数据
    },
    async getDepartmentAllListData () { // 获取所有数据
      try {
        await this.$store.dispatch('department/GetDepartmentList', {
          request: true,
          enabled: true
        })
      } catch (error) {
        // console.log(error)
        // if (error.message !== cancelAxiosText) { // 中断请求不提示
        this.$notify.error({
          title: '错误',
          message: error.message
        })
        // }
      }
    },
    async resetEditData (data = null) { // 重置编辑表单
      this.dialog.status = data ? 'update' : 'create'
      this.dialog.title = data ? '编辑' : '添加'
      // this.dialog.visible = true
      this.editInfo.id = undefined
      this.editInfo.disabled = false
      this.editInfo.data = {
        ...this.formParams
      }
      if (data) { // 编辑
        // this.editInfo.id = data.uuid
        this.editInfo.id = data.id
        Object.keys(this.formParams).forEach((item) => {
          this.editInfo.data[item] = data[item]
        })
        this.editInfo.disabled = true
      }
    },
    async initEditDialog (data = null) { // 编辑－显示弹出框
      await this.resetEditData(data)
      this.getDepartmentAllListData()
      this.$nextTick(() => {
        this.$refs['editInfo'].clearValidate()
      })
    }
  },
  watch: {
    visible (newVal, oldVal) {
      if (newVal !== this.dialog.visible) {
        this.dialog.visible = newVal
        if (newVal) {
          this.initEditDialog(this.detailData)
        }
      }
    },
    'dialog.visible' (newVal, oldVal) {
      this.$emit('update:visible', newVal)
    },
    'departmentList': {
      handler: function (newVal, oldVal) {
        this.departmentAllListData = []
        let rootData = { id: '', name: '顶级类目', children: [] }
        rootData.children = newVal || []
        this.departmentAllListData.push(rootData)
      },
      deep: true,
      immediate: true
    }
  }
}
